<template>
  <div class="register-container">
    <div class="common-header">
      <router-link to="/">
        <h1 class="common-header__title">汉江水环境检测中心</h1>
      </router-link>
      <div class="common-header__login">
        <div>
          <a href="/" :underline="false" @click="navTo('/hj-home/')">登录</a>
        </div>
      </div>
    </div>
    <div class="register-form-container">
      <div class="register-form-title">
        重置密码
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            ref="code"
            v-model="form.code"
            type="text"
            placeholder="验证码"
            name="code"
            tabindex="1"
            maxlength="6"
            clearable
            auto-complete="off"
            class="max-width-100"
          />
          <sms-code-button :phone="form.phone" :type="smsType" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input v-model="form.rePassword" type="password" placeholder="确认密码" />
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left:40px;" @click="resetForm('form')">重置</el-button>
          <el-button :loading="loading" type="primary" style="margin-left: 50px;" @click.native.prevent="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { resetPassword } from '@/api/web/repassword'
import { isvalidPhone } from '@/utils/validate'
import SmsCodeButton from '@/components/SmsCodeButton'
import { encrypt, decrypt } from '@/utils/rsaEncrypt'

export default {
  components: {
    SmsCodeButton
  },
  data() {
    const validatephone = (rule, value, callback) => {
      if (!isvalidPhone(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        phone: '',
        password: '',
        rePassword: '',
        code: ''
      },
      smsType: '3',
      rules: {
        phone: [{ required: true, trigger: 'blur', validator: validatephone }],
        code: [
          { required: true, message: '请填写验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请正确填写6位验证码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/, message: '密码必须由大小写字母、数字、特殊字符组成的8-16字符组成', trigger: 'blur' }
        ],
        rePassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      loading: false
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          resetPassword({ phone: this.form.phone, password: encrypt(this.form.password), code: this.form.code }).then((res) => {
            this.loading = false
            this.navTo('/hj-home')
            // if (res.statusCode === 1) {
            //   this.navTo('/hj-home');
            // }
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm(form) {
		  this.$refs[form].resetFields()
    }
  }
}
</script>
<style lang="scss" scope>
    body {
        background: #f6f6f6;
    }
	.common-header {
	    height: 65px;
	    line-height: 65px;
	    border-bottom: 1px solid #D7D8D9;
      display: block;
		.common-header__title {
      display: inline-block;
      margin: 0;
      color: #006699;
      font-weight: 600;
      line-height: 65px;
      font-size: 22px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      float: left;
		}
		.el-link{
			color: #606266;
		}
		.common-header__login{
			display: inline-block;
      margin-right: 20px;
			float: right;
		}
	}
    .register-container {
        width: 100%;
        background: #f6f6f6;

        .register-form-container {
            max-width: 1000px;
            background: #ffffff;
            margin: 80px auto;
            padding: .5rem 0;

            .register-form-title {
                width: 100%;
                height: 6rem;
                line-height: 6rem;
                text-align: center;
                font-size: 20px;
                color: #373d41;
            }

            .el-form {
                max-width: 360px;
                margin: 0 auto;
                margin-bottom: 10px;
            }
        }
    }
</style>
